<!--
 * @Author: wrh123 482597539@qq.com
 * @Date: 2024-01-11 10:34:24
 * @LastEditors: wrh123 482597539@qq.com
 * @LastEditTime: 2024-01-22 22:10:52
 * @FilePath: /vue-admin/src/views/assessment/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="assessment">
    <el-card shadow="never">
      <el-form label-width="80px" :inline="true">
        <el-form-item label="开始日期:">
          <el-date-picker v-model="value1" style="width: 220px;" size="mini" value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="handleDateChange" popper-class="form-data-ccc" />
        </el-form-item>
        <el-form-item label="比赛结果:">
          <el-select v-model="formAssessment.competitionResult" size="mini" placeholder="请选择考核结果">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="subimit">查询</el-button>
          <el-button type="primary" size="mini" @click="addContest">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <!-- 表格 -->
      <el-table border :data="tableData" style="width: 100%">

        <el-table-column prop="competitionName" align="center" label="比赛名称" width="100px" />
        <el-table-column prop="startDate" align="center" label="开始日期" width="155px" />
        <el-table-column prop="endDate" align="center" label="结束日期" width="155px" />
        <el-table-column prop="startDate" align="center" label="上架日期" width="155px" />
        <el-table-column prop="competitionResult" width="100" align="center" label="比赛结果">
          <template v-slot="{ row }">
            <span v-if="row.competitionResult === 1">未开始</span>
            <span v-if="row.competitionResult === 2">比赛中</span>
            <span v-if="row.competitionResult === 3">比赛结束</span>
          </template>
        </el-table-column>
        <el-table-column prop="headcount" width="100" align="center" label="报名总人数" />
        <el-table-column prop="profitCount" width="100" align="center" label="盈利的人数" />
        <el-table-column prop="profitRatios" width="120" align="center" label="获奖人数比率" />
        <el-table-column prop="username" width="100" align="center" label="比赛负责人" />
        <el-table-column width="100" align="center" label="数据分析">
          <template v-slot="{ row }">
            <!-- http://192.168.1.94:8080 -->
            <el-upload :show-file-list="false" :on-success="handleSuccess" class="upload-demo"
              :data="{ id: row.id, competitionName: row.competitionName }" :headers="header"
              :action="basePathAdmin+'/MatchSettings/importCSV'" accept=".csv">
              <el-button size="small" type="primary">{{
                row.gameDataAnalysis === 0 ? '未上传' : '重新上传'
              }}
              </el-button>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template v-slot="{ row }">
            <el-button type="text" size="mini" @click="ModifyRatio(row.id)">修改</el-button>
            <el-button type="text" size="mini" @click="deleteContest(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paging :page-size="formAssessment.pageSize" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog title="新增比赛" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="contestForm">
        <el-form-item label="比赛名称" label-width="100px">
          <el-input v-model="contestForm.competitionName" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="开始日期" label-width="100px">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="contestForm.startDate" type="date"
            placeholder="选择开始日期" size="mini">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" label-width="100px">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="contestForm.endDate" type="date"
            placeholder="选择结束日期" size="mini">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="比赛上架时间" label-width="100px">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="contestForm.onlineDate" type="date"
            placeholder="选择上架日期" size="mini">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitContest" size="mini">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改获奖比率" :visible.sync="dialogFormVisibleModifyAwardRatio" width="30%">
      <el-form :model="ModifyAwardRatioForm" ref="ModifyAwardRatioForm" :rules="rules">
        <el-form-item prop="profitRatio" label="获奖比率" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.profitRatio" size="mini" placeholder="请输入0-1之间的数字"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="firstName" label="第一名姓名" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.firstName" size="mini" placeholder="请输入第一名的姓名"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="firstProfit" label="第一名账户余额" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.firstProfit" size="mini" placeholder="请输入第一名的账户余额"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="secondName" label="第二名姓名" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.secondName" size="mini" placeholder="请输入第二名的姓名"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="secondProfit" label="第二名账户余额" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.secondProfit" size="mini" placeholder="请输入第二名的账户余额"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="thirdName" label="第三名姓名" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.thirdName" size="mini" placeholder="请输入第三名的姓名"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="thirdProfit" label="第三名账户余额" label-width="120px">
          <el-input v-model="ModifyAwardRatioForm.thirdProfit" size="mini" placeholder="请输入第三名的账户余额"
            autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleModifyAwardRatio = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmModifyAwardRatio" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Account, AccountType, challenges, PhaseList1, modifyTimeToEndOfDay } from '@/utils'
import paging from '@/components/paging.vue'
import { deleteById, getChallengeProject } from '@/api/Tradingacct'
import Cookies from "js-cookie";
import { TOKEN_KEY } from "@/constants/KEY";
import { addContest, delContest, getAwardRatio, getContestList, modifyAwardRatio } from "@/api/contest";
import baseData from '@/baseData'

export default {
  name: 'VueAdminContest',
  components: {
    paging
  },
  data() {
    return {
      basePathAdmin:baseData.basePathAdmin,
      header: {
        Authentication: Cookies.get(TOKEN_KEY)
      },
      contestForm: {
        onlineDate: null, // 比赛上架时间
        endDate: null, // 结束日期
        competitionName: null, // 比赛名称
        startDate: null, // 开始日期
      },
      value1: [],
      dialogFormVisible: false, // 新增比赛弹出框
      dialogFormVisibleModifyAwardRatio: false, // 修改获奖比率弹出框
      ModifyAwardRatioForm: {
        profitRatio: null, // 获奖比率
        id: null, // 获奖比率id
        firstName: null,
        firstProfit: null,
        secondName: null,
        secondProfit: null,
        thirdName: null,
        thirdProfit: null
      },
      // 考核结果
      options: [
        { id: null, name: '全部' },
        { id: 1, name: '未开始' },
        { id: 2, name: '比赛中' },
        { id: 3, name: '比赛结束' },
      ],

      KCSS: [],
      tableData: [
        {
          assess: 1,
          pattern: 0,
          stage: 0
        }

      ],
      total: 0,
      formAssessment: {
        competitionName: null,
        competitionResult: null,
        endDate: null,
        startDate: null,
        page: 1,
        pageSize: 10,
      },
      rules: {
        profitRatio: [
          { required: true, message: '请输入获奖比率', trigger: 'blur' }
        ],
        firstName: [
          { required: true, message: '请输入第一名姓名', trigger: 'blur' }
        ],
        firstProfit: [
          { required: true, message: '请输入第一名账户余额', trigger: 'blur' }
        ],
        secondName: [
          { required: true, message: '请输入第二名姓名', trigger: 'blur' }
        ],
        secondProfit: [
          { required: true, message: '请输入第二名账户余额', trigger: 'blur' }
        ],
        thirdName: [
          { required: true, message: '请输入第三名姓名', trigger: 'blur' }
        ],
        thirdProfit: [
          { required: true, message: '请输入第三名账户余额', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    Account() {
      return Account
    },
    PhaseList1() {
      return PhaseList1
    },
    AccountType() {
      return AccountType
    },
    challenges() {
      return challenges
    }
  },

  mounted() {
    this.getAssessmentListArr()
    // this.getChallengeProjectlist()
  },

  methods: {
    // // 挑战项目
    // async getChallengeProjectlist() {
    //   const data = await getChallengeProject()
    //   // console.log('data',data);
    //   this.KCSS = data
    // },

    async getAssessmentListArr() {
      const data = await getContestList(this.formAssessment)
      this.tableData = data.records
      this.total = data.total
    },
    // 查询表单
    subimit() {
      clearTimeout(this.timer) // 清理上一次的定时器
      this.timer = setTimeout(() => {
        this.formAssessment.page = 1
        this.getAssessmentListArr()
      }, 100)
    },
    handleDateChange() {
      if (this.value1 !== null) {
        this.value1[1] = modifyTimeToEndOfDay(this.value1[1])
        this.formAssessment.startDate = this.value1[0]
        this.formAssessment.endDate = this.value1[1]
      } else {
        this.formAssessment.startDate = null
        this.formAssessment.endDate = null
      }
    },
    // 后期要改
    handleSizeChange(val) {
      this.formAssessment.pageSize = val
      // 处理分页大小改变的逻辑
      this.getAssessmentListArr()
    },
    handleCurrentChange(val) {
      this.formAssessment.page = val
      // 处理当前页码改变的逻辑
      this.getAssessmentListArr()
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 文件上传成功
     * @date 2024/3/11
     */
    handleSuccess(res) {
      this.getAssessmentListArr()
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: res.msg
        })
      } else {
        this.$message({
          type: 'error',
          message: res.msg
        })
      }

    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 新增比赛
     * @date 2024/3/13
     */
    addContest() {
      this.dialogFormVisible = true
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 提交比赛
     * @date 2024/3/13
     */
    async submitContest() {
      await addContest(this.contestForm)
      await this.getAssessmentListArr()
      this.dialogFormVisible = false
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 删除比赛
     * @date 2024//19
     */
    async deleteContest(id) {
      if (!id) return
      this.$confirm('你确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delContest(id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        await this.getAssessmentListArr()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 修改获奖比率
     * @date 2024/3/13
     */
    async ModifyRatio(id) {
      this.ModifyAwardRatioForm.id = id
      this.dialogFormVisibleModifyAwardRatio = true
      this.ModifyAwardRatioForm = await getAwardRatio(id)
    },
    /**
     * @author 焦延龙 <19131965027@163.com>
     * @description 确认修改获奖比率
     * @date 2024/3/13
     */
    async confirmModifyAwardRatio() {
      await this.$refs.ModifyAwardRatioForm.validate()
      if (!this.ModifyAwardRatioForm.profitRatio) {
        this.$message({
          type: 'error',
          message: '请填写获奖比率'
        })
        return
      }
      if (this.ModifyAwardRatioForm.profitRatio < 0 || this.ModifyAwardRatioForm.profitRatio > 100) {
        this.$message({
          type: 'error',
          message: '请填写0-100之间的数字'
        })
        return
      }
      this.$confirm('你确定要修改吗?', '修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.ModifyAwardRatioForm.profitRatio = parseFloat(this.ModifyAwardRatioForm.profitRatio)
        await modifyAwardRatio(this.ModifyAwardRatioForm)
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.dialogFormVisibleModifyAwardRatio = false
        await this.getAssessmentListArr()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
